<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
/**
 * @constructor
 * @implements {google.maps.MapType}
 */
function CoordMapType() {
}

CoordMapType.prototype.tileSize = new google.maps.Size(256,256);
CoordMapType.prototype.maxZoom = 19;

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  div.style.backgroundColor = '#E5E3DF';
  return div;
};

CoordMapType.prototype.name = 'Tile #s';
CoordMapType.prototype.alt = 'Tile Coordinate Map Type';
</script>
<script>
  var app = angular.module('myApp', ['ngMap']);
  app.controller('MapTypeBaseCtrl', function() {
    var vm = this;
    vm.coordMapType = new CoordMapType();
    vm.mapTypeChanged = function() {
      var showStreetViewControl = this.getMapTypeId() != 'coordinate';
      this.setOptions({'streetViewControl': showStreetViewControl});
    };
  });
</script>
</head>
<body ng-controller="MapTypeBaseCtrl as vm">
  <ng-map zoom="10" center="41.850033,-87.6500523"
    on-maptypeid_changed="vm.mapTypeChanged()"
    street-view-control="false"
    map-type-id="coordinate"
    map-type-control-options="{
      mapTypeIds: ['coordinate', 'ROADMAP'],
      style: 'DROPDOWN_MENU'
    }">
    <map-type name="coordinate" object="vm.coordMapType">
    </map-type>
  </ng-map>
</body>
</html>
